<!--
 * @Author: 赖钊亮
 * @Description: 马上注册界面
 * @Date: 2020-06-28 16:21:53
<<<<<<< HEAD
<<<<<<< HEAD
 * @LastEditTime: 2020-07-06 10:08:45
=======
 * @LastEditTime: 2020-07-02 09:35:18
>>>>>>> b5fa0090977597b5b3a29b6c4a2b5f7bbcc9a802
=======
 * @LastEditTime: 2020-07-02 13:37:57
>>>>>>> e4a6ab53a7784521de9a28ee63b2aef2478a5413
 * @LastEditors: Please set LastEditors
 * @FilePath: \mobile_item_121e:\新建文件夹\jkshopping\src\pages\my\components\register.vue
--> 
<template>
  <div>
    <van-nav-bar title="马上登录" left-text="返回" @click-left="goBack" left-arrow />
  
        <div class="register">
          <van-form @submit="onSubmit">
            <van-cell-group>
              <van-field
                label="手机号"
                v-model="phone"
                placeholder="请输入手机号码"
                name="phone"
                :rules="[{required: true, message: '请填写手机号码'}]"
              />
            </van-cell-group>
            <van-field
              center
              clearable
              label="短信验证码"
              name="code"
              v-model="code"
              placeholder="请输入短信验证码"
              :rules="[{ required: true, message: '请检查手机号码是否正确' }]"
            >
              <template #button>
                <van-button size="small" type="primary" @click="Code">验证码</van-button>
              </template>
            </van-field>
            <br />
            <van-button round block type="info" native-type="submit">确定</van-button>
            <br />
          </van-form>
        </div>
  </div>
</template>

<script>
import * as api from "@/api/apiList/user/user.js";
import * as Api from "@/api/apiList/user/login/login.js";
import { createNamespacedHelpers } from "vuex";
const { mapMutations } = createNamespacedHelpers("userModule");

export default {
  data() {
    // 手机号码、验证码存储
    return {
      phone: "",
      code: ""
    };
  },

  methods: {
    // 引入vuex模块
    ...mapMutations(["CHANGESIGN_TOKEN"]),
    // 校验手机号码是否正确
    onSubmit(values) {
      if (/^1[3456789]\d{9}$/.test(values.phone)) {
        this.$dialog
          .alert({
            title: "登录成功"
          })
          .then(async () => {
            let res = await this.API_login();
            if (res.data.code === 200) {
              this.CHANGESIGN_TOKEN(res.data.data.access_token);
              this.$router.push("/my");
            }
          });
      } else {
        this.$dialog
          .alert({
            title: "登录失败"
          })
          .then(() => {});
      }
    },
    // 获取验证码接口数据
    async API_code(mobile) {
      let params = {
        mobile,
        type: 1
      };
      return await api.code(params);
    },

    // 获取验证码
    async Code() {
      let res = await this.API_code(this.phone);
      this.code = res.data.data.code;
      this.$dialog
        .alert({
          title: "验证码",
          message: this.code
        })
        .then(() => {});
    },
    // 校验验证码接口
    async API_checkCode(mobile, code) {
      let data = {
        mobile,
        code,
        type: 1
      };

      return await api.checkCode(this.qs.stringify(data));
    },
    //返回上一页
    goBack() {
      this.$router.go(-1);
    },
    // 跳转注册界面
    register() {
      this.$router.push("/register");
    },
    // 登录接口
    async API_login() {
      let data = {
        mobile: 18820034114,
        password: 123123
      };
      return await Api.login(this.qs.stringify(data));
    }
  },
  async activated() {
    let res = await this.API_login();
    console.log(res);
  }
};
</script>

<style lang="scss" scoped>
.register {
  padding: 10px;
  box-sizing: border-box;
  .van-button {
    margin: 0 auto;
    width: 50%;
  }
}
p {
  text-align: center;
  line-height: 50px;
  color: rgb(241, 135, 135);
}
.classphone {
  color: rgb(34, 34, 34);
}
</style>